@import "./common/mixin.scss";
@import "./common/utils.scss";
@import "./common/vars.scss";

// .as-radio
@include module(radio-button) {
  & + & {
    margin-left: 10px;
  }
  font-size: 0;
  display: inline-block;
  padding: $--button-default-padding-vertical
    $--button-default-padding-horizontal;
  border-radius: $--border-radius-base;
  border: solid 1px $--border-color-base;

  cursor: pointer;
  @include utils-user-select(none);
  position: relative;

  border-top-left-radius: $--border-radius-base;
  border-bottom-left-radius: $--border-radius-base;
  border-top-right-radius: $--border-radius-base;
  border-bottom-right-radius: $--border-radius-base;

  &:focus,
  &:hover {
    .as-radio-button__label {
      color: mix($--color-white, $--color-text-regular, $--color-hover-percent);
    }
  }

  &:active {
    .as-radio-button__label {
      color: mix($--color-black, $--color-text-regular, $--color-hover-percent);
    }
  }

  @include when(disabled) {
    cursor: not-allowed;
  }

  @include when(checked) {
    z-index: 1;
    background: $--color-primary;
    border-color: $--color-primary;

    @include when(disabled) {
      background: mix(
        $--color-white,
        $--color-primary,
        $--color-disabled-percent
      );
      border-color: mix(
        $--color-white,
        $--color-primary,
        $--color-disabled-percent
      );
    }
  }

  // .as-radio__inner
  @include element(inner) {
    & > input {
      display: none;
    }
  }

  @include element(label) {
    line-height: 1;
    vertical-align: middle;
    cursor: pointer;
    display: inline-block;
    font-weight: bold;
    font-size: $--font-size-base;
    color: $--color-text-regular;

    @include when(checked) {
      color: $--color-white;
    }

    @include when(disabled) {
      cursor: not-allowed;

      color: mix(
        $--color-white,
        $--color-text-regular,
        $--color-disabled-percent
      );

      @include when(checked) {
        color: mix($--color-white, $--color-white, $--color-disabled-percent);
      }
    }
  }

  @include modifier(small) {
    padding: $--button-small-padding-vertical $--button-small-padding-horizontal;
    .as-radio-button__label {
      font-size: $--button-small-font-size;
    }
  }

  @include modifier(mini) {
    padding: $--button-mini-padding-vertical $--button-mini-padding-horizontal;
    .as-radio-button__label {
      font-size: $--button-mini-font-size;
    }
  }
}

@include module(radio-group) {
  font-size: 0;
  @include module(radio-button) {
    margin-left: 0;
    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
    &:last-child {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child):not(:first-child) {
      border-top-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
      border-top-right-radius: 0;
    }

    &:first-child:last-child {
      border-top-left-radius: $--border-radius-base;
      border-bottom-left-radius: $--border-radius-base;
      border-top-right-radius: $--border-radius-base;
      border-bottom-right-radius: $--border-radius-base;
    }

    &:not(:last-child) {
      margin-right: -1px;
    }
  }
}
